<template>
	<view class="content">
		<view class="body">
			<up-navbar :title="t('Operating bank cards')" @leftClick="goWithdraw" :autoBack="true">
				<template #left>
				  <view class="nav-back-btn">
				    <image class="back-icon" src="../../../static/img/left.png"></image>
				  </view>
				</template>
			</up-navbar>
			
		<!-- 	<view class="payment-selector">
				<view class="selector-container">
					<view class="tab" :class="{ active:baseData.paymentMethod ==='bKash' }"
						@click="switchPaymentMethod('bKash')">bKash</view>
					<view class="tab" :class="{ active: baseData.paymentMethod==='Nagad'}"
						@click="switchPaymentMethod('Nagad')">Nagad</view>
				</view>
			</view> -->
			
			<view class="top">
				<u-form>
						<!-- 	<u-form-item >
						<u-input v-model="baseData.cardForm.ifsc" class="custom-input" inputAlign="right"
							placeholder="Please select bank" @click="showBankSelector">
							<template #prefix>
								<up-text :text="t('Select Bank')" margin="0 3px 0 0" size="15"></up-text>
							</template>
							<template #suffix>
								<up-icon name="arrow-right" size="1rem"></up-icon>
							</template>
						</u-input>
					</u-form-item> -->
					<u-form-item >
						<u-input v-model="baseData.cardForm.ifsc" class="custom-input" inputAlign="right"
							placeholder="Please select bank" @click="showBankSelector" >
							<template #prefix>
								<up-text :text="t('Select Bank')" margin="0 3px 0 0" size="15"></up-text>
							</template>
							<template #suffix>
								<up-icon name="arrow-right" size="1rem"></up-icon>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-input v-model="baseData.cardForm.holder_name" pattern="^\d+$" class="custom-input"
							inputAlign="right" placeholder="Please Enter">
							<template #prefix>
								<up-text :text="t('Account Name')" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<!-- <u-form-item>
						<u-input v-model.trim="baseData.cardForm.holder_name" class="custom-input" inputAlign="right"
							placeholder="Please Enter">
							<template #prefix>
								<up-text :text="t('Account Holder Name')" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item> -->
					<u-form-item>
						<u-input v-model="baseData.cardForm.account_num" class="custom-input" inputAlign="right"
							placeholder="Phone Number">
							<template #prefix>
								<up-text :text="t('Account Num')"
									margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-input v-model="baseData.cardForm.id_number" class="custom-input" inputAlign="right"
							placeholder="ID Card">
							<template #prefix>
								<up-text text="ID Card" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-input v-model="baseData.cardForm.acc_phone" class="custom-input" inputAlign="right"
							placeholder="Phone">
							<template #prefix>
								<up-text text="Phone" margin="0 3px 0 0" size="15"></up-text>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			
			<view class="notice-box">
				<text class="notice-text">
					<!-- অর্থ উত্তোলন ক্রত শেষে, উপরে থাকা সঠিক এবং সক্রিয় ব্যবহত ওয়ালেট (Bkash/Nagad) নির্বাচন করুন এবং
					উত্তোলনের আগে সঠিক প্রাপকের নাম ও মোবাইল নম্বর পূরণ করেছেন কিনা তা পরীক্ষা করুন। দীর্ঘমেয়াদী আক্রিম
					ওয়ালেটগুলি পুনরায় KYC যাচাইয়ের প্রয়োজন হতে পারে, যাতে উত্তোলন বার্থ না হয়। ধন্যবাদ। -->
				</text>
			</view>
		</view>
		<view class="btn" @click="addBank">{{t('Save')}}</view>
		
		<up-popup :show="showBankPopup" v-model="baseData.cardForm.bankName" mode="bottom" border-radius="10">
			<view class="bank-popup">
				<view class="bank-popup-header">
					<text class="bank-popup-title">Select Bank</text>
					<view class="bank-popup-close" @click="closeBankPopup">
						<up-icon name="close" size="1.5rem"></up-icon>
					</view>
				</view>

				<scroll-view scroll-y="true" class="bank-list" style="max-height: 60vh;">
					<view class="bank-item" v-for="(bank, index) in bankList " :key="index" @click="selectBank(bank)">
						{{ bank.label }}
					</view>
				</scroll-view>
			</view>
		</up-popup>
		<up-popup :show="showWalletPopup" v-model="baseData.cardForm.walletName" mode="bottom" border-radius="10">
			<view class="bank-popup">
				<view class="bank-popup-header">
					<text class="bank-popup-title">Select Wallet</text>
					<view class="bank-popup-close" @click="closeWalletPopup">
						<up-icon name="close" size="1.5rem"></up-icon>
					</view>
				</view>

				<scroll-view scroll-y="true" class="bank-list" style="max-height: 60vh;">
					<view class="bank-item" v-for="(bank, index) in bankName" :key="index" @click="selectWallet(bank)">
						{{ bank.label }}
					</view>
				</scroll-view>
			</view>
		</up-popup>
		<a :href="baseData.aircraftUrl" target="_blank">
			<img style="width: 2rem;
				height: 2rem;
				position: fixed;
				bottom: 30vh;
				right:6px;
				z-index: 99999;" src="@/static/teltgram.png" />
		</a>
	</view>

</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive, ref } from 'vue'
	import { setBankCard, bankCardInfo } from '@/api/user'

	const { t } = useI18n();
	const countryId = ref(null);
	const baseData = reactive({
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		paymentMethod: 'bKash', 
		cardForm: {
			ifsc: null,
			holder_name: null,
			account_num: null,
			country: 5,
			id_number: null,
			acc_phone: null,
			ac_type: 1,
			platform: 1
		}
	})
	const showWalletPopup = ref(false)
	const walletName = ref([
		{ label: "EASYPAISA", value: 1 },
		{ label: "JAZZCASH", value: 2 },
	])
	const bankList = [
	  { label: "ALBARAKA ISLAMIC BANK", value: "PKR_AIB" },
	  { label: "ALLIED BANK LIMITED", value: "PKR_ABL" },
	  { label: "APNA MICRO FINANCE BANK", value: "PKR_AMFB" },
	  { label: "ASKARI BANK LIMITED", value: "PKR_ASBL" },
	  { label: "BANK AL HABIB LIMITED", value: "PKR_BAHL" },
	  { label: "BANK ALFALAH LIMITED", value: "PKR_BAL" },
	  { label: "BANK ISLAMI PAKISTAN LIMITED", value: "PKR_BIPL" },
	  { label: "BANK OF KHYBER", value: "PKR_BOK" },
	  { label: "CITI BANK NA", value: "PKR_CBN" },
	  { label: "DUBAI ISLAMIC BANK PAKISTAN LIMITED", value: "PKR_DIBPL" },
	  { label: "FAYSAL BANK LIMITED", value: "PKR_FBL" },
	  { label: "FINCA MICRO FINANCE BANK", value: "PKR_FMFB" },
	  { label: "FIRST WOMEN BANK LIMITED", value: "PKR_FWBL" },
	  { label: "HABIB BANK LIMITED", value: "PKR_HBL" },
	  { label: "HABIB METROPOLITAN BANK LIMITED", value: "PKR_HMBL" },
	  { label: "JS BANK LIMITED", value: "PKR_JBL" },
	  { label: "MCB BANK LIMITED", value: "PKR_MBL" },
	  { label: "MCB ISLAMIC", value: "PKR_MI" },
	  { label: "MEEZAN BANK", value: "PKR_MB" },
	  { label: "NATIONAL BANK OF PAKISTAN", value: "PKR_NBOP" },
	  { label: "NIB BANK LIMITED", value: "PKR_NBL" },
	  { label: "NRSP MICRO FINANCE BANK", value: "PKR_NMFB" },
	  { label: "SAMBA BANK LIMITED", value: "PKR_SBL" },
	  { label: "SILK BANK LIMITED", value: "PKR_SIBL" },
	  { label: "SINDH BANK LIMITED", value: "PKR_SINBL" },
	  { label: "SONERI BANK LIMITED", value: "PKR_SONBL" },
	  { label: "STANDARD CHARTERED BANK LTD", value: "PKR_SCBL" },
	  { label: "SUMMIT BANK LIMITED", value: "PKR_SUMBL" },
	  { label: "TELENOR MICRO FINANCE BANK", value: "PKR_TMFB" },
	  { label: "THE BANK OF PUNJAB", value: "PKR_TBOP" },
	  { label: "U MICRO FINANCE BANK", value: "PKR_UMFB" },
	  { label: "UNITED BANK LIMITED", value: "PKR_UBL" },
	  { label: "ADVANS PAKISTAN MICRO FINANCE BANK", value: "PKR_APMFB" },
	  { label: "HBL MICRO FINANCE BANK", value: "PKR_HMFB" },
	  { label: "INDUSTRIAL AND COMMERCIAL BANK OF CHINA LIMITED", value: "PKR_KMFB" },
	  { label: "KHUSHHALI MICRO FINANCE BANK", value: "PKR_KHUSH" },
	  { label: "MCB ARIF HABIB", value: "PKR_MCBAH" }
	];

	const showBankPopup = ref(false);
	
	const switchPaymentMethod = async (method) => {
		baseData.paymentMethod = method;
		countryId.value = 5;

		const ress = await bankCardInfo({ country: countryId.value })
		if (ress.code == 0) {
			baseData.cardForm = ress.data ? ress.data : {
				ifsc: null,
				holder_name: null,
				account_num: null,
			}
		}

	}
	
	const showBankSelector = () => {
		showBankPopup.value = true;
	}
	
	const showWalletSelector = () => {
		showWalletPopup.value = true;
	}
	
	const closeBankPopup = () => {
		showBankPopup.value = false;
	}
	
	const closeWalletPopup = () => {
		showWalletPopup.value = false;
	}
	
	const selectBank = (bank) => {
		baseData.cardForm.ifsc = bank.label; 
		showBankPopup.value = false;
	}
	
	const selectWallet = (bank) => {
		baseData.cardForm.ifsc = bank.label; 
		showWalletPopup.value = false;
	}
	const addBank = async () => {
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		if (!baseData.cardForm.account_num) {
			uni.showToast({
				title: t('Please fill in') + t('Account Number'),
				icon: "none"
			})
			return
		}
		const regex = /^\d+$/
		if (!regex.test(baseData.cardForm?.account_num)) {
			uni.showToast({
				title: t('account must be numeric'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.holder_name) {
			uni.showToast({
				title: t('Please fill in') + t('Account Holder Name'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.id_number) {
			uni.showToast({
				title: t('Please fill in') + t('ID Card'),
				icon: "none"
			})
			return
		}
		if (!baseData.cardForm.acc_phone) {
			uni.showToast({
				title: t('Please fill in') + t('Phone'),
				icon: "none"
			})
			return
		}


	
	const getBankValue = (ifscCode) => {
	  
	  const bank = bankList.find(item => item.label === ifscCode);
	  
	  return bank ? bank.value : null;
	};
		const regexNum = /^3\d{9}$/; 
		if (baseData.paymentMethod === 'bKash') {
			if (!regexNum.test(baseData.cardForm?.acc_phone)) {
				uni.showToast({
					title: t('Account number and phone number must start with 3'),
					icon: "none"
				});
				return;
			}
		}
		
		
		
		
		
		
		
		const holder_nameregex = /^[A-Za-z\s]+$/;
		if (!holder_nameregex.test(baseData.cardForm?.holder_name)) {
			uni.showToast({
				title: t('Account name error'),
				icon: "none"
			})
			return
		}
		baseData.cardForm.holder_name = baseData.cardForm.holder_name?.replace(/\s*/g, '');
		baseData.cardForm.country = 5;
		baseData.cardForm.ac_type = 1;
		baseData.cardForm.platform=1;
		const ifscCode = baseData.cardForm.ifsc; 
		baseData.cardForm.ifsc = getBankValue(ifscCode);
		const res = await setBankCard(baseData.cardForm)
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
			goWithdraw()
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}
	const goWithdraw = () => {
		uni.reLaunch({
			url: '/pages/withdraw/index',
		})
	}
	const getBankLabel = (ifscCode) => {
	  
	  const bank = bankList.find(item => item.value === ifscCode);
	  
	  return bank ? bank.label : null;
	};
	const getCard = async () => {
		const ress = await bankCardInfo({country:5,platform:baseData.cardForm.platform })
		if (ress.code == 0) {
			
				baseData.cardForm = ress.data.length > 0 ? ress.data[0] : {
					ifsc: null,
					holder_name: null,
					account_num: null,
					id_number: null,
					acc_phone: null,
					platform:1
				},
				
				
				baseData.cardForm.ifsc=getBankLabel(baseData.cardForm.ifsc);
			
		}
	}
	onMounted(() => {
		
		uni.setNavigationBarTitle({
			title: 'task!' + t('Earn money so easy') + '!' 
		});
		baseData.cardForm.platform=uni.getStorageSync('platform');

		getCard()
	});
</script>

<style lang="scss" scoped>
	
	.content {
		width: 100%;
		background: #F1F1EF;
		min-height: 100vh;
		 display: flex;
		 		flex-direction: column;
		 		align-items: center;
	}

	.body {
		width: 100%;
		min-height: 100vh;
		background: #f7f7f7;
	}

	.top {
		
		
		background: #ffffff;
		background-size: 100% 130%;
		display: flex;
		flex-flow: column;
		margin-top: 40px;
	}

	
	.custom-input {
		width: 100%;
		border: none;
		color: #333;
		box-shadow: none;
		outline: none;
	}

	.custom-input:focus {
		border-bottom: 2px solid #ff5800;
	}



	
	.payment-selector {
		margin-top: 50px;
		background: #f5f5f5;
		display: flex;
		justify-content: center;
		
		padding: 10px;
	}

	.selector-container {
		display: flex;
		width: fit-content;
		border-radius: 25px;
		overflow: hidden;
		border: 1px solid rgb(47, 122, 218);
	}

	.tab {
		padding: 4px 15px;
		font-size: 16px;
		text-align: center;
	}

	.tab.active {
		background: rgb(47, 122, 218);
		color: white;
	}

	.tab:not(.active) {
		background: white;
		color: rgb(47, 122, 218);
	}

	
	.notice-box {
		margin-top: 20px;
		padding: 20px;
		background: #f5f5f5;
		border-radius: 5px;
	}

	.notice-text {
		font-size: 15px;
		color: #ff0000;
		line-height: 1.6;
	}

	
	.bank-select-container {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.bank-label {
		flex-shrink: 0;
	}

	.bank-dropdown {
		flex: 1;
		text-align: right;
	}

	
	.bank-popup {
		background: #fff;
		padding-bottom: 20px;
	}

	.bank-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
	}

	.bank-popup-title {
		font-size: 16px;
		font-weight: 500;
	}

	.bank-list {
		max-height: 60vh;
	}

	.bank-item {
		padding: 15px 20px;
		border-bottom: 1px solid #f5f5f5;
	}

	.bank-item:active {
		background-color: #f0f0f0;
	}
</style>